<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼图游戏</title>
    <link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <!-- 页面标题 -->
    <h3>HTML5拼图游戏</h3>
    <!-- 水平线 -->
    <hr>
    <!-- 游戏内容 -->
    <div id="time-box">
        共计时间：<span id="time">00:00:00</span>
    </div>
    <!-- 游戏画布 -->
    <canvas id="game-box" width="300" height="300" style="border: 1px solid black">
        对不起，您的浏览器不支持HTML5 canvas
    </canvas>
    <!-- 游戏按钮 -->
    <div>
        <button id="restart" onclick="restartGame()">重新开始</button>
    </div>
</div>
<script type="text/javascript">
    //获取画布对象
    var can = document.getElementById('game-box');
    //获取2d context
    var context = can.getContext('2d');
    //图片素材来源
    var img = new Image();
    img.src = "image/1.jpg";
    img.onload = function (ev) {
        generateNum();//打乱拼图
        drawCanvas();//绘制拼图
    };

    var num = [
        [00, 01, 02],
        [10, 11, 12],
        [20, 21, 22]
    ];

    //打乱拼图
    function generateNum() {
        for (var i = 0; i < 50; i++) {
            var i1 = Math.round(Math.random() * 2);
            var j1 = Math.round(Math.random() * 2);
            var i2 = Math.round(Math.random() * 2);
            var j2 = Math.round(Math.random() * 2);
            //对调位置
            var temp = num[i1][j1];
            num[i1][j1] = num[i2][j2];
            num[i2][j2] = temp;
        }
    }

    var width = 100;//方块的边长

    //绘制拼图
    function drawCanvas() {
        context.clearRect(0, 0, 300, 300);
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                if (num[i][j] !== 22) {
                    //获取行标
                    var row = parseInt((num[i][j] / 10).toString());
                    //获取列标
                    var col = num[i][j] % 10;
                    //绘图
                    context.drawImage(img, col * width, row * width, width, width, j * width, i * width, width, width);
                }
            }
        }
    }

    function detectBox(i, j) {
        //检测空白区域是否在当前块正上方
        if (i > 0 && num[i - 1][j] === 22) {
            //交换空白区域与当前方块的位置
            num[i - 1][j] = num[i][j];
            num[i][j] = 22;
        } else if (i < 2 && num[i + 1][j] === 22) {
            //检测空白区域是否在当前块的正下方
            num[i + 1][j] = num[i][j];
            num[i][j] = 22;
        } else if (j > 0 && num[i][j - 1] === 22) {
            //----正左方
            num[i][j - 1] = num[i][j];
            num[i][j] = 22;
        } else if (j < 2 && num[i][j + 1] === 22) {
            //----正右方
            num[i][j + 1] = num[i][j];
            num[i][j] = 22;
        }
    }

    can.onmousedown = function (ev) {
        //获取画布边界
        var bound = can.getBoundingClientRect();
        //获取鼠标在画布上的位置
        var x = ev.pageX - bound.left;
        var y = ev.pageY - bound.top;

        var row = parseInt(y / width);
        var col = parseInt(x / width);

        if (num[row][col] !== 22) {
            //移动单击的方块
            detectBox(row, col);
            //重绘绘制板
            drawCanvas();

            var isWin = checkWin();

            if (isWin) {
                //清除计时器
                clearInterval(timer);
                //绘制完整图片
                context.drawImage(img, 0, 0);
                context.font = "bold 68px serif";
                context.fillStyle = "red";
                context.fillText("游戏成功！", 20, 150);
            }
        }
    };
    //获取游戏计时器文本对象
    var time = document.getElementById('time');
    var h = 0, m = 0, s = 0;//初始化，时分秒
    function getCurrentTime() {
        //将时分秒转化为整数
        s = parseInt(s);
        m = parseInt(m);
        h = parseInt(h);
        //每秒变量s先自增1
        s++;
        if (s === 60) {
            s = 0;
            m++;
        }
        if (m === 60) {
            m = 0;
            h++;
        }

        //修改时分秒让其保持两位数显示
        if (s < 10) {
            s = "0" + s;
        }
        if (m < 10) {
            m = "0" + m;
        }
        if (h < 10) {
            h = "0" + h;
        }
        //将当前及时的时间显示在页面上
        time.innerHTML = h + ":" + m + ":" + s;
    }

    var timer = setInterval("getCurrentTime()", 1000);


    function checkWin() {
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                if (num[i][j] !== i * 10 + j) {
                    return false;
                }
            }
        }
        return true;
    }

    function restartGame() {
        clearInterval(timer);
        //时间清零
        s = 0;
        m = 0;
        h = 0;
        //重新显示时间
        getCurrentTime();
        timer=setInterval("getCurrentTime()",1000);
        //重新打乱
        generateNum();

        drawCanvas();
    }
</script>
</body>
</html>